<template>
    <div class="select">
        <van-nav-bar
            class="header"
            left-text="返回"
            left-arrow
            @click-left="$router.push('/home')"
            @click-right="$router.push('/home')"
        >
            <template #title>
                <van-dropdown-menu active-color="#1989fa" duration="0.4">
                    <van-dropdown-item
                        :title="selectItem.name"
                        ref="item"
                        @open="openDropdwn"
                    >
                        <van-cell
                            v-for="item in dropdownList"
                            :key="item.id"
                            center
                            :title="item.name"
                            @click="changeType(item)"
                        >
                            <template #right-icon>
                                <van-icon
                                    v-if="index === item.id"
                                    name="passed"
                                    active-color="#ee0a24"
                                />
                            </template>
                        </van-cell>
                    </van-dropdown-item>
                    <!-- <van-dropdown-item v-model="value1" :options="option1" /> -->
                </van-dropdown-menu>
            </template>
            <template #right>
                <van-icon name="search" size="22" color="#101010" />
            </template>
        </van-nav-bar>
        <!-- 筛选组件 -->
        <sizer :id="index" @changeId="updateId" />
    </div>
</template>

<script>
import { getAlltype } from '@/api/jia';
import Sizer from './compinents/Sizer.vue';
import { setItem } from '@/utils/jia-storage';
export default {
    data() {
        return {
            dropdownList: [], // 全部频道数据
            selectItem: {}, // 被点击的频道(到时候页面间的交互可以传query或者id过来默认显示)
            index: this.$route.query.id
        };
    },
    methods: {
        changeType(item) {
            this.selectItem = item;
            this.$router.push({
                query: { id: item.id }
            });
            this.index = item.id;
            setItem('activeID', item.id - 1);
            this.$refs.item.toggle();
        },
        async openDropdwn() {
            try {
                const { data } = await getAlltype();
                data.splice(0, 3);
                this.dropdownList = data;
                this.selectItem = this.dropdownList.find(
                    item => item.id === this.index - 0
                );
            } catch (err) {
                this.$toast('请检查网络刷新重试');
            }
        },
        updateId(val) {
            this.index = val;
        }
    },
    created() {
        this.openDropdwn();
    },
    components: {
        Sizer
    }
};
</script>

<style scoped lang="scss">
.select {
    background-color: #eeeeee;
    /deep/.van-nav-bar__content {
        height: 88px;
        .van-nav-bar__arrow {
            font-size: 35px;
            color: unset;
        }
        .van-nav-bar__text {
            font-size: 34px;
            color: unset !important;
        }
    }
    /deep/.van-nav-bar__left,
    .van-nav-bar__right {
        top: 9px;
    }
    /deep/.van-dropdown-menu__bar {
        box-shadow: unset;
    }
    /deep/.van-dropdown-menu__title {
        font-size: 35px;
    }
    /deep/.van-dropdown-menu__title::after {
        top: 35%;
        right: -0.12rem;
        margin-top: -0.05rem;
        border: 0.05rem solid;
        border-color: transparent transparent #8c8d8f #8c8d8f;
    }
    /deep/.van-ellipsis {
        overflow: visible;
    }
    /deep/.van-popup--top {
        padding-top: 20px;
    }
    /deep/.van-cell--center {
        height: 70px;
    }
    /deep/.van-cell {
        font-size: 30px;
        text-align: left;
    }
    .header {
        z-index: 7;
    }
}
</style>
